<template>
    <h1 style="text-align: center;margin-bottom: 50px;">搜索结果</h1>
    <el-row style="margin-bottom: 50px;justify-content: center;" @change="getData">
        <el-col v-for="(item, index) in products" :key="item" :span="6" :offset="index > 0 ? 2 : 0">
            <router-link :to="{ name: 'product', params: { name: item.productId } }">
                <el-card :body-style="{ padding: '0px' }">
                    <!-- 换用base64显示图片，不再使用本地图片 -->
                    <!-- <img :src=getImageUrl(item.description) alt=""
                        style="height: 100%;width: 100%;border:1px solid #000;" /> -->
                    <img :src="item.picture"  alt="图片未上传"
                        style="height: 100%;width: 100%;"/>
                    <div style="padding: 14px">
                        <div style="font-size: 30px;padding: 14px">品类：{{ item.categoryId }}</div>
                        <div style="font-size: 30px;padding: 14px">名字：{{ item.name }}</div>
                    </div>
                </el-card>
            </router-link>
        </el-col>
    </el-row>

    <div>
        <br>
        <br>
        <!--    放recommend-->
        <recommend></recommend>
    </div>
</template>

<script setup>
import api from "../../api/index"
import { onMounted, reactive, watch } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const products = reactive([])
onMounted(() => {
    getData()
})
watch(() => store.state.change, (nowVal, oldVal) => {
    // console.log("change",nowVal,oldVal)
    getData()
}
)
const getImageUrl = (url) => {
    return new URL(url, import.meta.url).href;
}

const getData = () => {
    api.getProductsByName(store.state.searchWord).then(res => {
        products.splice(0, products.length)
        products.push(...res.data.data)
    })
}
</script>

<style scoped>
  .image {
    width: 100%;
    display: block;
  }
</style>